<template>
    <div>
        <input type="text" placeholder="请输入用户名" v-bind:value="userName" v-on:input="setUserName($event)"><br>
        <input type="password" placeholder="请输入密码" v-model="password"><br>
        <button v-on:click="loginOperation">登录</button>
    </div>
</template>

<script>
    export default {
        methods: {
            loginOperation() {
                console.log(this.userName+","+this.password);
                this.$axios.get(`/user/login`,{
                    params:{
                        userName:this.userName,
                        password:this.password
                    }
                }).then(response=>{
                    if(response.data.result==='ok'){
                        this.$emit('loginSuccess',true);    //编程触发一个事件，使用自定义事件名'loginSuccess'
                    }else{
                        alert(response.data.message);
                    }
                });
            },
            setUserName(event){
                this.userName = event.target.value;
            }
        },
        data() {
            return {
                userName: "",
                password: "",
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>